<template>
	<u-popup border-radius="28" mode="bottom" height="60%" :value="showPickerDlg" @close="onCancel">
		<view class="custom-popup">
			<!-- 标题栏 -->
			<view class="title">
				{{ title }}
			</view>
			<!-- 选项区域 -->
			<view class="content-box">
				<slot />
			</view>
			<!-- 底部按钮栏 -->
			<view class="menu flex-row-between">
				<u-button  @click="onReset()" :custom-style="customStyle">重选</u-button>
				<u-button type="primary" @click="onConfirm()" :custom-style="customStyle1">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'selectPopup',
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: {
			title: {
				type: String,
				default: '标题'
			},
			showPickerDlg: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				customStyle:{
					borderRadius: '0',
					border:'1px solid #ebedf0'
				},
				customStyle1:{
					borderRadius: '0',
				}
			}
		},
		methods: {
			onCancel() {
				this.$emit('close');
			},
			onConfirm() {
				this.$emit('confirm');
			},
			onReset() {
				this.$emit('reset');
			}
		}
	}
</script>

<style lang="less">
	.custom-popup {
		display: flex;
		flex-direction: column;
		background: white;
		height: 100%;

		.title {
			color: #323233;
			font-weight: 500;
			font-size: 32rpx;
			text-align: center;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			flex-grow: 0;
			flex-shrink: 0;
			background: white;
			margin-bottom: 30rpx;
			border-bottom: 1px solid #F5F6F7;
		}

		.content-box {
			flex-grow: 1;
			flex-shrink: 1;
			height: 100rpx;
			overflow: hidden;
		}

		.menu {
			height: 128rpx;
			flex-grow: 0;
			flex-shrink: 0;
			border-top: 1px solid #F5F6F7;
			padding: 0px 32rpx;
			margin-top: 10rpx;
			background: white;
			
			button::after{
				border-radius: 0 !important;
				border: none;
			}
			&>u-button,
			&>.u-btn{
				&:first-child {
					width: 24%;
				}

				&:last-child {
					width: 74%;
				}
			}
		}
	}
</style>
<style>
	
</style>